@import "../common/var.scss";
@import "../common/mixin.scss";
.padding-top-350 {
    padding-top: r(350);
}

.padding-top-144 {
    padding-top: r(144);
}

.margin-top-144 {
    margin-top: r(144);
}

.margin-top-174 {
    margin-top: r(174);
}

.common-status {
    position: absolute;
    right: 0;
    top: r(134);
    width: r(200);
    &.success {
        .circle {
            border-color: #f192a7;
        }
        .text {
            color: #f192a7;
        }
    }
    &.fail {
        .circle {
            border-color: #999999;
        }
        .text {
            color: #999999;
        }
    }
    .text {
        position: absolute;
        left: r(15);
        top: r(80);
        z-index: 9;
        background-color: #ffffff;
        width: 80%;
        text-align: center;
        transform: rotate(18deg);
        line-height: r(60);
    }
    .circle {
        border-radius: 50%;
        border-style: solid;
        display: inline-block;
        position: absolute;
        &.c1 {
            border-width: r(4);
            width: r(118);
            height: r(118);
            right: r(42);
            top: r(40);
        }
        &.c2 {
            border-width: r(5);
            border-style: dotted;
            width: r(168);
            height: r(168);
            right: r(15);
            top: r(15);
        }
        &.c3 {
            border-width: r(6);
            width: r(200);
            height: r(200);
            right: 0;
            top: 0;
        }
    }
}

.shop-i-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: #ffffff;
}

.shop-i-head {
    height: r(142);
    position: relative;
    .bg-img {
        height: r(335);
        width: 100%;
    }
    .top {
        position: absolute;
        top: r(27);
        left: r(48);
        right: r(48);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
            font-size: r(54);
            width: 100%;
            text-align: center;
        }
        .top-left {
            display: flex;
            align-items: center;
            width: 100%;
        }
        .icon-back-product {
            margin-right: r(71);
            position: absolute;
        }
        .search {
            display: flex;
            align-items: center;
            border-radius: r(45);
            background-color: rgba(246, 246, 246, .8);
            height: r(90);
            width: 72.2%;
            margin-right: r(50);
            margin-left: r(108);
            padding: 0 r(55);
            i {
                @include bg('../../dist/img/search.png');
                width: r(45);
                height: r(44);
            }
            input {
                background-color: transparent;
                font-size: r(36);
                margin-left: r(29);
            }
        }
        .cate {
            text-align: center;
            color: $fc-title-gary;
            font-size: r(21);
        }
    }
    .shop-info {
        position: absolute;
        left: r(48);
        bottom: r(35);
        display: flex;
        .shop-logo {
            width: r(108);
            height: r(108);
            margin-right: r(28);
        }
        .shop-name {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #ffffff;
            width: r(573);
            .line1 {
                font-size: r(42);
            }
            .line2 {
                font-size: r(36);
            }
        }
        .shop-contact {
            color: #ffffff;
            i {
                @include bg('../../dist/img/connect_w.png');
                display: inline-block;
                width: r(42);
                height: r(43);
                margin: 0 r(14) r(-10) 0;
            }
        }
    }
    .shop-love {
        position: absolute;
        right: 0;
        bottom: r(30);
        color: #ffffff;
        font-size: r(30);
        display: flex;
        .fans {
            display: flex;
            flex-direction: column;
            flex: 1;
            font-size: r(36);
            color: $fc-white;
            margin-right: r(18);
            justify-content: center;
        }
        .love-btn {
            width: r(198);
            height: r(102);
            border-top-left-radius: r(15);
            border-bottom-left-radius: r(15);
            background-color: $bg-red;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
                font-size: r(36);
                color: $fc-white;
                margin-left: r(14);
            }
        }
    }
}

.shop-i-content {
    position: absolute;
    left: 0;
    width: 100%;
    &.top1 {
        top: r(422);
    }
    &.top2 {
        top: r(282);
    }
}

.shop-i-type {
    display: flex;
    background-color: #ffffff;
    .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: r(26) 0;
        width: 25%;
        position: relative;
        height: r(138);
        color: $fc-base;
        &.active {
            color: $fc-red;
            border-bottom: 2px solid $fc-red;
        }
        .txt1 {
            font-size: r(48);
            margin-top: r(16);
        }
        .txt2 {
            font-size: r(36);
            margin-top: r(23);
        }
    }
    .home-icon {
        @include bg('../../dist/img/home_icon.png');
        width: r(60);
        height: r(59);
    }
    .dot {
        position: absolute;
        width: r(15);
        height: r(15);
        background-color: $bg-red;
        top: r(30);
        right: r(60);
        border-radius: 50%;
    }
}

.shop-all-type {
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    // padding: 0 r(60);
    border-top: 1px solid $border-gary;
    .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        color: $fc-base;
        width: 25%;
        &.active {
            color: $fc-red;
            border-bottom: 2px solid $fc-red;
        }
        .txt2 {
            line-height: r(138);
            font-size: r(36);
        }
    }
}

.shop-all-shaixuan {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid $border-gary;
    border-bottom: 1px solid $border-gary;
    background-color: #ffffff;
    padding: 0 r(60);
    .item {
        display: flex;
        justify-content: center;
        line-height: r(140);
        align-items: center;
        text-align: center;
        font-size: r(42);
        &.active {
            color: $fc-red;
            .gou {
                @include bg('../../dist/img/comment_check.png');
                width: r(31);
                height: r(21);
                margin-right: r(15);
            }
        }
        .down-arr-red {
            @include bg('../../dist/img/down_arr_red.png');
            width: r(18);
            height: r(11);
            margin-left: r(15);
        }
        .arr-group {
            display: flex;
            flex-direction: column;
            i {
                width: r(15);
                height: r(9);
                margin: r(5) 0 r(5) r(15);
            }
        }
        .up-arr-gray {
            @include bg('../../dist/img/up_arr.png');
        }
        .down-arr-gray {
            @include bg('../../dist/img/down_arr.png');
        }
    }
}

.shop-all-tuijian {
    z-index: 10000;
    position: fixed;
    top: r(422);
    background-color: #ffffff;
    width: 100%;
    .item {
        line-height: r(138);
        font-size: r(42);
        color: $fc-base;
        padding: 0 r(46);
        display: flex;
        justify-content: space-between;
        align-items: center;
        &.active {
            color: $fc-red;
            i {
                @include bg('../../dist/img/comment_check.png');
                width: r(31);
                height: r(21);
            }
        }
    }
}

.shop-all-cuxiao {
    background-color: #ffffff;
    line-height: r(140);
    border-top: 1px solid $border-gary;
    font-size: r(42);
    color: $fc-title-gary;
    margin-top: r(-135);
    padding: 0 r(42);
}

.shop-cuxiao-time {
    font-size: r(36);
    color: $fc-title-gary;
    padding: r(30) r(42) 0 r(42);
}

.shop-i-con1 {
    padding: r(30);
    .shop-i-coupon {
        display: flex;
        margin-bottom: r(30);
        .item {
            display: flex;
            margin-right: r(30);
            &.ok {
                .left {
                    background-color: #cccccc;
                    &:after {
                        border-left: 4px dashed #cccccc;
                    }
                }
                .right {
                    .line1 {
                        color: #ccc;
                    }
                    .line2 {
                        color: #ccc;
                        border: r(3) solid #ccc;
                    }
                }
            }
            .left {
                background-color: #6081da;
                color: #ffffff;
                text-align: center;
                width: r(200);
                padding-top: r(20);
                position: relative;
                &:after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: r(-4);
                    bottom: 0;
                    border-left: 4px dashed #6081da;
                }
                .unit {
                    font-size: r(45);
                }
                .price {
                    font-size: r(72);
                }
                .condition {
                    font-size: r(30);
                    margin: r(18) 0 r(27) 0;
                }
            }
            .right {
                // height: r(162);
                width: r(133);
                text-align: center;
                background-color: #ffffff;
                .line1 {
                    font-size: r(36);
                    color: #5282de;
                    margin: r(36) 0 r(33) 0;
                }
                .line2 {
                    font-size: r(20);
                    color: #5293d5;
                    border: r(3) solid #5293d5;
                    border-radius: r(20);
                    line-height: r(34);
                    width: r(97);
                    margin: auto;
                }
            }
        }
    }
    .top-img {
        @include imgwrap(auto, r(978));
    }
}

.shop-i-type-head {
    @include imgwrap(r(225), r(91));
    margin: 0 auto;
    padding: r(60) 0 r(40) 0;
}

.shop-i-pro-head {
    font-size: r(48);
    color: $fc-base;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: r(48) 0;
    i {
        @include bg('../../dist/img/item_arr_r.png');
        width: r(21);
        height: r(43);
    }
}

.shop-i-con2 {
    padding: 0 r(30) r(60) r(30);
    margin-bottom: r(30);
    background-color: #ffffff;
    .img1 {
        @include imgwrap(100%, r(900));
    }
    .img2 {
        display: flex;
        flex-wrap: wrap;
        .item {
            @include imgwrap(48.8%, r(540));
            margin-top: r(30);
            &:nth-child(odd) {
                margin-right: r(24);
            }
        }
    }
}

.shop-i-pro-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .item {
        position: relative;
        margin-bottom: r(55);
        overflow: hidden;
        &:nth-child(odd) {
            margin-right: r(24);
        }
        .img-box {
            @include imgwrap(r(498), r(498));
        }
        .title {
            font-size: r(42);
            margin: r(30) 0 r(28) 0;
            line-height: r(50);
            color: $fc-base;
        }
        .sell-price {
            font-size: r(54);
            color: $fc-red;
            margin-right: r(10);
        }
        .ori-price {
            font-size: r(36);
            color: $fc-gary;
            vertical-align: r(4);
        }
    }
    .text-box {
        padding: 0 r(20) r(34) r(20);
    }
    .tag {
        background-color: $bg-red;
        border-radius: r(6);
        font-size: r(30);
        line-height: r(50);
        color: #ffffff;
        display: inline-block;
        text-align: center;
        vertical-align: r(4);
        margin-bottom: r(30);
        padding: 0 r(10);
    }
    .tag_new {
        @extend .tag;
        color: #ff0036;
        background-color: #ffe7e7;
    }
    .item {
        background-color: #ffffff;
        margin-bottom: r(24) !important;
    }
}

.shop-tg-pro-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    .item {
        position: relative;
        margin-bottom: r(55);
        overflow: hidden;
        width: r(528);
        &:nth-child(odd) {
            margin-right: r(24);
        }
        .img-box {
            @include imgwrap(r(528), r(684));
        }
        .title {
            font-size: r(42);
            margin: r(30) 0 r(28) 0;
            line-height: r(50);
            color: $fc-base;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sell-price {
            font-size: r(54);
            color: $fc-red;
            margin-right: r(10);
        }
        .joinner-count {
            font-size: r(36);
            color: $fc-gary;
            vertical-align: r(4);
        }
    }
    .text-box {
        padding: 0 r(20) r(34) r(20);
    }
    .tag {
        background-color: $bg-red;
        border-radius: r(6);
        font-size: r(30);
        line-height: r(50);
        color: #ffffff;
        display: inline-block;
        text-align: center;
        vertical-align: r(4);
        margin-bottom: r(30);
        padding: 0 r(10);
    }
    .tag_new {
        @extend .tag;
        color: #ff0036;
        background-color: #ffe7e7;
    }
    .item {
        background-color: #ffffff;
        margin-bottom: r(24) !important;
    }
}

.shop-ms-pro-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    .item {
        position: relative;
        margin-bottom: r(55);
        overflow: hidden;
        width: r(528);
        &:nth-child(odd) {
            margin-right: r(24);
        }
        .img-box {
            @include imgwrap(r(528), r(684));
        }
        .title {
            font-size: r(42);
            margin: r(30) 0 r(28) 0;
            line-height: r(50);
            color: $fc-base;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sell-price {
            font-size: r(54);
            color: $fc-red;
            margin-right: r(10);
        }
        .ori-price {
            font-size: r(36);
            color: $fc-gary;
            vertical-align: r(4);
            text-decoration: line-through;
        }
    }
    .text-box {
        padding: 0 r(20) r(34) r(20);
    }
    .tag {
        background-color: $bg-red;
        border-radius: r(6);
        font-size: r(30);
        line-height: r(50);
        color: #ffffff;
        display: inline-block;
        text-align: center;
        vertical-align: r(4);
        margin-bottom: r(30);
        padding: 0 r(10);
    }
    .tag_new {
        @extend .tag;
        color: #ff0036;
        background-color: #ffe7e7;
    }
    .item {
        background-color: #ffffff;
        margin-bottom: r(24) !important;
    }
}

.product-filter-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    .item {
        position: relative;
        margin-bottom: r(55);
        .img-box {
            @include imgwrap(r(528), r(684));
        }
        .title {
            font-size: r(42);
            margin: r(30) 0 r(28) 0;
            line-height: r(50);
            color: $fc-base;
        }
        .sell-price {
            font-size: r(54);
            color: $fc-red;
            margin-right: r(10);
        }
        .ori-price {
            font-size: r(36);
            color: $fc-gary;
            vertical-align: r(4);
        }
    }
    .text-box {
        padding: 0 r(20) r(34) r(20);
    }
    .tag {
        background-color: $bg-red;
        border-radius: r(6);
        font-size: r(30);
        line-height: r(50);
        color: #ffffff;
        display: inline-block;
        text-align: center;
        vertical-align: r(4);
        margin-bottom: r(30);
        padding: 0 r(10);
    }
    .tag_new {
        @extend .tag;
        color: #ff0036;
        background-color: #ffe7e7;
    }
    .item {
        background-color: #ffffff;
        margin-bottom: r(24) !important;
    }
}

.product-topNav {
    .title-center {
        font-size: r(54);
        color: $fc-base;
    }
}

.pro-cate-con1 {
    margin: r(30) 0;
    li {
        position: relative;
        background-color: #ffffff;
        &:after {
            position: absolute;
            top: 0;
            content: '';
            height: 2px;
            background-color: #e5e5e5;
            left: r(48);
            right: 0;
        }
        a {
            line-height: r(138);
            padding-left: r(48);
            font-size: r(42);
            color: $fc-base;
        }
    }
}

.shop-list {
    padding-top: r(282);
    .shop-item {
        margin-top: r(30);
        background-color: #ffffff;
        padding: r(48) r(30);
        .shop-info {
            margin-bottom: r(58);
            display: flex;
            .shop-img {
                @include imgwrap(r(117), r(117));
                margin-right: r(30);
            }
        }
        .shop-name {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name {
                color: $fc-base;
                font-size: r(42);
            }
            .location {
                color: $fc-gary;
                font-size: r(36);
            }
        }
        .pro-list {
            display: flex;
            justify-content: space-between;
            .pro-item {
                @include imgwrap(32.3%, r(336));
                position: relative;
                .sellprice {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background-color: rgba(0, 0, 0, .5);
                    color: #ffffff;
                    line-height: r(54);
                    padding: 0 r(10);
                }
            }
        }
    }
}

.joinnow-wrap {
    text-align: center;
    .joinnow {
        background-color: $bg-red;
        color: #ffffff;
        line-height: r(90);
        font-size: r(42);
        width: r(432);
        margin: 0 auto;
        border: 0;
        border-radius: r(10);
        &.bg-cb {
            background-color: #cbcbcb;
        }
    }
}

.time-leave {
    font-size: r(36);
    text-align: center;
    border-top: 1px solid $border-gary;
    .line1 {
        color: $fc-title-gary;
        position: relative;
        margin-bottom: r(27);
        &:before {
            position: absolute;
            content: '';
            height: 2px;
            left: 28%;
            top: r(14);
            width: 7.3%;
            background-color: #e5e5e5;
        }
        &:after {
            position: absolute;
            content: '';
            height: 2px;
            right: 28%;
            top: r(14);
            width: 7.3%;
            background-color: $border-gary;
        }
    }
    .line2 {
        color: $fc-gary;
        span {
            background-color: #212021;
            width: r(56);
            line-height: r(56);
            color: #ffffff;
            display: inline-block;
            border-radius: r(10);
            margin: 0 r(15);
        }
    }
}

.tuan_message {
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    padding: r(40) r(48);
    i {
        width: r(90);
        height: r(90);
        margin-right: r(40);
        &.success {
            @include bg('../../dist/img/success_red.png');
        }
        &.fail {
            @include bg('../../dist/img/fail_red.png');
        }
    }
    .msg {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: r(104);
        .line1 {
            color: $fc-base;
            font-size: r(42);
        }
        .line2 {
            color: $fc-title-gary;
            font-size: r(36);
        }
    }
}

.tuan-d-pro {
    display: flex;
    border-bottom: 1px solid $border-gary;
    padding: r(40) 0;
    position: relative;
    .img-wrap {
        @include imgwrap(r(360), r(360));
    }
    .info-wrap {
        width: 57%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
            font-size: r(42);
            color: $fc-base;
            line-height: r(60);
        }
        .tip {
            color: $fc-gary;
            font-size: r(36);
            .price {
                display: inline-block;
                color: $fc-red;
                font-size: r(54);
                margin-top: r(28);
            }
        }
    }
}

.tuan-d-members {
    text-align: center;
    .members {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding-top: r(58);
    }
    .member {
        @include imgwrap(r(135), r(135));
        line-height: r(135);
        position: relative;
        margin: 0 r(18) r(35) r(18);
        border: 3px solid #ffffff;
        border-radius: 50%;
        &.bd-gray {
            border-color: $fc-gary;
        }
        &.bd-white {
            border-color: #ffffff;
        }
        &.bd-red {
            border-color: $border-red;
        }
        img {
            border-radius: 50%;
        }
        .leader {
            position: absolute;
            top: r(-8);
            left: 0;
            background: $bg-red;
            color: #ffffff;
            border-radius: r(50);
            border: 3px solid #ffffff;
            font-size: r(30);
            line-height: r(45);
            width: r(80);
            text-align: center;
        }
        .more {
            @include bg('../../dist/img/more_btn.png');
            width: r(54);
            height: r(12);
        }
    }
    .member-leave {
        font-size: r(42);
        color: $fc-base;
        padding-bottom: r(48);
        .count {
            color: $fc-red;
        }
    }
    .joinnow {
        width: 100%;
        margin-bottom: r(48);
        line-height: r(140);
        font-size: r(48);
    }
}

.tuan-d-rule {
    .title {
        font-size: r(42);
        color: $fc-base;
        text-align: center;
        padding: r(40) 0;
    }
    .steps {
        display: flex;
        text-align: center;
        justify-content: center;
        .step {
            padding: 0 r(48);
            position: relative;
            &:not(:last-child):after {
                position: absolute;
                content: '';
                background: $bg-red;
                width: r(195);
                height: r(6);
                left: 60%;
                right: 0;
                top: 14%;
            }
            .num {
                display: inline-block;
                line-height: r(42);
                width: r(42);
                border: 3px solid $border-red;
                border-radius: 50%;
                text-align: center;
                color: $fc-red;
            }
            .text {
                font-size: r(36);
                color: $fc-base;
                margin: r(17) 0 r(60) 0;
            }
        }
    }
    .rule-list {
        color: $fc-gary;
        font-size: r(36);
    }
}

.product-status-wrap {
    display: flex;
    .status-left {
        height: r(150);
        display: flex;
        background-color: #f71c4a;
        width: 69.5%;
        .status-left-r {
            margin-top: r(20);
        }
        .sell-price {
            color: #ffffff;
            margin-right: r(30);
            margin-top: r(50);
            font-size: r(42);
            .big {
                font-size: r(90);
            }
        }
        .origin-price {
            color: #ffbece;
            font-size: r(36);
        }
        .join-info {
            color: #ffbece;
            font-size: r(36);
            background-color: #de1842;
            width: r(222);
            line-height: r(56);
            text-align: center;
            border-radius: r(10);
            margin-top: r(10);
            .count {
                color: #ffffff;
            }
        }
    }
    .status-right {
        height: r(150);
        background-color: #ffea52;
        font-size: r(36);
        text-align: center;
        width: 30.5%;
        position: relative;
        .time-leave {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .text {
            color: #f71c4a;
            margin: r(24) 0 r(20) 0;
        }
        .time {
            background-color: #5a3410;
            font-size: r(42);
            border-radius: r(10);
            line-height: r(57);
            width: r(57);
            text-align: center;
            color: #ffffff;
            display: inline-block;
        }
        .dot {
            color: #5a3410;
            font-size: r(56);
            display: inline-block;
            width: r(15);
            margin-top: r(-5);
        }
        .triangle-left {
            width: 0;
            height: 0;
            border-top: r(75) solid transparent;
            border-right: r(34) solid #ffea52;
            border-bottom: r(75) solid transparent;
            margin: r(-138) 0 0 r(-32);
        }
    }
}

.status-fixed-btns {
    font-size: r(42);
    .line1 {
        margin-bottom: r(20);
    }
}

.protocol-title {
    font-size: r(58);
    color: #424244;
    padding: r(58) 0 r(38) 0;
    text-align: center;
}

.protocol-content {
    font-size: r(42);
    line-height: r(60);
}